<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>background-clip</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #container 
            {
                width: 400px;
                height: 200px;
                background-image:url(img/15008518202_c265dfa55f_h.jpg);
                background-color: #f00;
                border:10px dashed green;
                padding:20px;
                background-repeat:no-repeat;
                background-attachment:scroll;
                -webkit-background-size: contain;
                background-size: contain;
                -webkit-background-clip: border-box;
                background-clip: border-box;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <p>background-clip:</p>
            <input type="radio" name="clip" id="" onclick="changeProperty('border-box')" />border-box
            <input type="radio" name="clip" id="" onclick="changeProperty('padding-box')" />padding-box
            <input type="radio" name="clip" id="" onclick="changeProperty('content-box')" />content-box
        </div>
    <script>
    var containerE=document.getElementById("container");
    function changeProperty(type){
        containerE.style.backgroundClip=type;
    }
    </script>
    </body>
</html>